<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>内边距padding</title>
    <style>
        /* 
            页面布局三大核心: 盒子模型 浮动 定位
            网页布局过程:
               1 先准备好相关网页元素 网页元素基本都是盒子box
               2 利用css设置好盒子的样式 然后摆放到相应位置(浮动 定位)
                3 往盒子里面装内容
            网页核心:利用css摆盒子
        */
        /* 
        盒子模型的组成  几乎所有标签都是盒子
            把html页面的布局元素看作一个矩形盒子 也就是一个盛装内容的容器
            css盒子模型的本质是个盒子 封装周围的html元素 包括 : 边框border 外边距margin 内边距padding 实际内容content
            padding 内边距  盒子边框与内容之间的距离 默认为0  是整个 不是首行
                padding-top
                padding-bottom
                padding-left
                padding-right
            复合属性 简写
            padding:  
                5px   上下左右都是5px
                5px 10px 上下5px 左右10px
                5px 10px 20px 上5px 左右10px 下20px
                5px 10px 20px 30px 上5px 右10px 下20px 左30px 顺时针

            指定padding后 发生了2件事情
                内容和边框有了距离

                padding会影响盒子实际大小
                    width和height是调整content的大小
                如果一个盒子没有width/height属性(任意一个) 则padding不会撑开盒子大小

            盒子大小=content+padding+border+margin
                背景包括整个元素
         */
        div.aa {
            border: solid 2px green;
            width: 300px;
            height: 200px;
            background-color: pink;
            padding-left: 2em;
            padding-top: 2em;
            padding-right: 2em;
            /* 层叠性 覆盖 */
            padding: 5em;
            /* text-indent: 3em; */
        }

        /* div.bb {
            width: 300px;
            height: 200px;
            padding: 2em;
            background-color: pink;
        }
        a {
            display: inline-block;
            text-decoration: none;
            color: #4c4c4c;
            padding-left: 20px;
         
            padding-right: 20px;
            font-size: 12px;
            line-height: 41px;
            
        }
        div.nav {
            border-top: solid 3px #ff8500;
            border-bottom: 1px  #edeef0 solid;
            height: 41px;
            background-color: #fcfcfc;
           
        }
        a:hover {
           background-color:green;
            color: orange;
        } */
        /* div#root {
            background-color: gray;
            width: 300px;
        }
        a {
            padding-left: 30px;
            width: 270px;

            display: block;
            color: white;
            text-decoration: none;
        } */
        div.zz {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        p {
            background-color: green;
            /* width: 200px; */
            padding: 100px;
        }
    </style>
</head>

<body>
    <div id="root">
            <div class="zz">
                <p>你好世界</p>
            </div>
            <!-- <a v-for="(li,index) in list" target="_blank" :key="index" :href=`${index}'http://www.baidu.com/'`>{{li}}</a> -->
        
        <!-- <div class="aa">{{word}}</div>
    <h1>padding会影响盒子实际大小</h1>
    <div class="bb">{{word}}</div>
    <h1>padding会影响盒子实际大小</h1> -->
     <!-- <div class="nav">
        <a href="#">关注我</a>
        <a href="#">微博</a>
        <a href="#">博客</a>
        <a href="#">移动客户端</a>
        <a href="#">手机新浪网</a>
        <a href="#">设为首页</a>
     </div> -->
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                word: Mock.mock('@cword(50)'),
                list:[
                    "手机 电话卡",
                    "电视 盒子",
                    "笔记本 平板",
                    "出行 穿戴",
                    "智能 路由器",
                    "健康 儿童",
                    "耳机 音响"
                ]
            }
        },
    })
</script>

</html>